<template>
  <div>
    <mbx lenev="用户管理" lenev1="角色列表" lenev2="权限管理"></mbx>
    <el-card class="box-card" style="margin-top: 20px">
      <el-button type="primary" @click="addjuetj = true">添加角色</el-button>

      <el-dialog title="添加角色" :visible.sync="addjuetj">
        <el-form :model="formjue" :rules="fromj" ref="fromjue">
          <el-form-item label="角色名称" prop="roleName" :label-width="formLabelWidth">
            <el-input v-model="formjue.roleName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="角色描述" :label-width="formLabelWidth">
            <el-input v-model="formjue.roleDesc" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addjuetj = false">取 消</el-button>
          <el-button type="primary" @click="addjue">确 定</el-button>
        </div>
      </el-dialog>

       <el-dialog title="修改角色" :visible.sync="xiujue">
        <el-form :model="formjue" :rules="fromj" ref="fromXiu">
          <el-form-item label="角色名称" prop="roleName" :label-width="formLabelWidth">
            <el-input v-model="formjue.roleName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="角色描述" :label-width="formLabelWidth">
            <el-input v-model="formjue.roleDesc" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="xiujue = false">取 消</el-button>
          <el-button type="primary" @click="addXiu">确 定</el-button>
        </div>
      </el-dialog>

      <el-table :data="list" style="width: 100%; margin-top: 20px" border stripe>
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-empty
              description="此角色暂无权限"
              v-if="scope.row.children.length <= 0"
            ></el-empty>
            <div class="da">
              <el-row v-for="item in scope.row.children" :key="item.id" id="col">
                <el-col :span="6">
                  <el-tag effect="dark" @close="shan(scope.row, item.id)" closable>{{
                    item.authName
                  }}</el-tag><i class="el-icon-caret-right"></i>
                </el-col>
                <el-col :span="18">
                  <el-row v-for="item1 in item.children" :key="item1.id" id="col">
                    <el-col :span="6">
                      <el-tag
                        effect="dark"
                        type="success"
                        @close="shan(scope.row, item1.id)"
                        closable
                      >
                        {{ item1.authName }}
                      </el-tag><i class="el-icon-caret-right"></i>
                    </el-col>
                    <el-col :span="18">
                      <el-tag
                        @close="shan(scope.row, item2.id)"
                        closable
                        type="warning"
                        effect="dark"
                        v-for="item2 in item1.children"
                        :key="item2.id"
                      >
                        {{ item2.authName }}
                      </el-tag>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column label="角色名称" prop="roleName"></el-table-column>
        <el-table-column label="角色描述" prop="roleDesc"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div>
              <el-button type="primary" icon="el-icon-edit" size="mini" @click="xg(scope.row)">编辑</el-button>
              <el-button
                type="danger"
                icon="el-icon-star-off"
                size="mini"
                @click="shanjue(scope.row.id)"
                >删除</el-button
              >
              <el-button type="warning" icon="el-icon-delete" size="mini"
                @click="fengjue(scope.row)">分配权限</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>

<el-dialog title="分配权限" :visible.sync="quanshu" width="40%">
<el-tree
  :data="quan"
  ref="quanfrom"
  show-checkbox
  node-key="id"
  default-expand-all
  :default-checked-keys="checkarr"
  :props="defaultProps">
</el-tree>
<span slot="footer" class="dialog-footer">
        <el-button @click="quanshu = false">取 消</el-button>
        <el-button type="primary" @click="xiugai">确 定</el-button>
      </span>
</el-dialog>

    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      quan:[],
      juseid:'',
      checkarr:[],
      quanshu:false,
      defaultProps: {
          children: 'children',
          label: 'authName'
      },
      list: [],
      formjue: {
        roleName: "",
        roleDesc: "",
      },
      xgid:'',
      addjuetj: false,
      xiujue:false,
      formLabelWidth: "80px",
      fromj: {
        roleName: [{ required: true, message: "请输入用户名", trigger: "blur" }],
      },
    };
  },
  created() {
    this.getlist();
  },
  methods: {
  async xiugai(){
       const checkedarr=this.$refs.quanfrom.getCheckedKeys()
       const banarr=this.$refs.quanfrom.getHalfCheckedKeys()
       const newarr=[...checkedarr,...banarr]
       const canarr=newarr.join(',')
       console.log(canarr)
       console.log(this.juseid)
       const res=await this.$API.Xiujue(this.juseid,canarr)
      //  console.log(res)
       this.getlist();
       this.quanshu=false
      //  console.log("true",checkedarr)
      //  console.log("ban",banarr)
  },
   async fengjue(row){
      this.checkarr = [];
      this.juseid=row.id
      this.quanshu=true
      const res=await this.$API.FenQuan()
      console.log(res)
      this.quan=res
      this.getfenid(row, this.checkarr);
    },
       getfenid(row, checkarr) {
      if (!row.children) {
        return checkarr.push(row.id);
      }
      row.children.forEach((item) => {
        this.getfenid(item, checkarr);
      });
    },
    addXiu(){
       this.$refs.fromXiu.validate(async valid=>{
         if(!valid) return false;
         const res=await this.$API.shanXiu(this.xgid,this.formjue)
          this.formjue = {};
        this.getlist()
        this.xiujue=false
       
       })
    },
    xg(row){
       this.xiujue=true
       this.xgid=row.id
      //  console.log(row)
       const {roleName,roleDesc}=row
       this.formjue={roleName,roleDesc}
    }, 
    async shanjue(id) {
      console.log(id);
      const res=await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
      if(res==='confirm'){
         await this.$API.shanJue(id)
         this.getlist()
      }
    },
    addjue() {
      this.$refs.fromjue.validate(async (valid) => {
        if (valid) {
          const res = await this.$API.AddJue(this.formjue);
          this.getlist();
          this.formjue = {};
          this.addjuetj = false;
        } else {
          return false;
        }
      });
    },
    async shan(row, rigid) {
      const res = await this.$API.shanQuan(row.id, rigid);
      row.children = res;
      console.log(row, rigid);
    },
    async getlist() {
      const res = await this.$API.LjhJue();
      console.log(res);
      this.list = res;
    },
  },
  computed: {},

  watch: {
    cart: {
      handler(newValue) {},
      deep: true,

      immediate: true,
    },
  },
};
</script>

<style scoped lang="scss">
.el-tag {
  margin: 5px;
}
.el-row {
  margin: 5px 0;
  border-bottom: 1px solid rgb(226, 222, 222);
}
#col {
  display: flex;
  align-items: center;
  justify-content: center;
}
.da {
  // width: 100%;
  margin: 0 20px;
  border-top: 1px solid rgb(226, 222, 222);
}
</style>
